<template>
    <div>
        <cus-modal
            ref="modal"
            title="已选菜肴分析"
            :width="884"
            :closable="false"
            @on-visible-change="onVisibleChange"
        >
            <div>
                <div style="border-left:1px solid #d7dde4;border-top:1px solid #d7dde4;margin-bottom:10px;display:flex;flex-wrap:wrap">
                    <div v-for="(item, index) in dishCategory" :key="index" class="itemBox">
                        <div class="itemBox-top">{{ item }}</div>
                        <div class="itemBox-bottom">{{ dishCategoryNum[index] }}</div>
                    </div>
                </div>
                <div style="padding:10px;border:1px solid #d7dde4;border-radius:4px">
                    <piechart ref="piechart" :nutrition="showForm.nutrition"></piechart>
                </div>
            </div>
            <Spin size="large" fix v-if="loading"> </Spin>
            <div slot="footer">
                <slot name="footer">
                    <div class="modal-footer">
                        <cus-button
                            size="small"
                            class="mr_2"
                            @onClick="onCancel"
                            >关闭</cus-button
                        >
                    </div>
                </slot>
            </div>
        </cus-modal>
    </div>
</template>

<script>
import {
    aiConfigDishAnalyze
} from "@/api/business/dishesModule";
import piechart from "./piechart"

export default {
    components: { piechart },
    name: "dishesTags",
    data() {
        return {
            loading: false,
            showForm: {},
            dishCategory: [],
            dishCategoryNum: []
        };
    },

    mounted() {
        
    },
    methods: {
        onVisibleChange(v) {
            if(!v) {
                
            }
        },
        show(row) {
            this.$refs["modal"].show = true;
            this.aiConfigDishAnalyzeApi();
        },
        //模态框确认
        onOk() {
            this.onCancel();
        },
        //模态框取消
        onCancel() {
            this.$refs["modal"].show = false;
        },
        // 获取营养信息 --- 接口
        aiConfigDishAnalyzeApi() {
            this.loading = true;
            return new Promise((resolve) => {
                aiConfigDishAnalyze({}).then((res) => {
                    this.loading = false;
                    if (res.retCode == 2000) {
                        this.dishCategory = res.data.dishCategory;
                        this.dishCategoryNum = res.data.dishCategoryNum;
                        let arr = [];
                        res.data.dishCategory.map((item, index) => {
                            arr.push({
                                value: res.data.dishCategoryNum[index],
                                name: item
                            })
                        })
                        this.showForm.nutritiondouble = arr;
                        console.log(this.showForm.nutritiondouble)
                        this.$refs["piechart"].myChart(this.showForm.nutritiondouble);
                        resolve();
                    }
                });
            });
        }
    },
};
</script>
<style scoped lang="less">
.tab1-left {
    width: 248px;
    min-height: 314px;
    border: 1px solid #CCCCCC;
    margin-right: 24rpx;
    &-title {
        height: 37px;
        border-bottom: 1px solid #CCCCCC;
        line-height: 37px;
        padding-left: 16px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #222222;
    }
    &-bottom {
        padding: 8px 16px;
        &-line {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
            margin-bottom: 8px;
        }
    }
}
.tab1-right {
    // flex: 1;
    width: 565px;
    min-height: 314px;
    display: flex;
    &-left {
        width: 260px;
        height: 314px;
        border: 1px solid #CCCCCC;
        &-title {
            height: 37px;
            border-bottom: 1px solid #CCCCCC;
            line-height: 37px;
            padding-left: 16px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #222222;
        }
        &-content {
            height: 238px!important;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 8px 16px;
            &-line {
                height: 20px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                line-height: 20px;
                margin-bottom: 8px;
            }
        }
    }
    &-right {
        width: 305px;
        min-height: 314px;
        border: 1px solid #CCCCCC;
        border-left: none;
        &-title {
            height: 37px;
            border-bottom: 1px solid #CCCCCC;
            line-height: 37px;
            padding-left: 16px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #222222;
        }
    }
}
.itemBox {
    width: 20%;
    border-right: 1px solid #CCCCCC;
    &-top {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #CCCCCC;
    }
    &-bottom {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #CCCCCC;
    }
}
</style>
